<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Estuary Colorscheme - Syntax highlighting</title>
    <link href="../../assets/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="../../assets/css/app.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="../../assets/css/estuary.css" media="screen, projection" rel="stylesheet" type="text/css" />

    <meta name="viewport" content="width=device-width">
    <meta name="author" content="Bram de Haan">
    <meta name="robots" content="index, follow">  <meta name="description" content="Colection of colorschemes for Code Syntax highlighting"/>
    <link rel="author" href="https://plus.google.com/+BramdeHaan/posts">
    </head>
    <body>
    <header id="header" class="row header">
      <div class="large-4 columns">
        <h1 class="repo-title"><a href="http://atelierbram.github.io/syntax-highlighting/">Syntax Highlighting <span class="tagline sh-small">colorschemes</span></a></h1>

      </div>
      <nav class="large-8 columns">
        <ul class="inline-list right">
          <li><a href="../../chrome-devtools">Chrome Devtools</a></li>
          <li><a href="../../lab">Lab</a></li>
          <li><a href="../../prism">Prism</a></li>
          <li><a href="../" data-dropdown="drop-atelierschemes" class="button dropdown dropdown-atelier">Atelier Schemes<span data-dropdown="drop-atelierschemes"></span></a><br>
          <ul id="drop-atelierschemes" class="f-dropdown small" data-dropdown-content>
            <li><a href="../">index - overview</a></li>
            <li><a href="../forest">Forest</a></li>
            <li><a href="../plateau">Plateau</a></li>
            <li><a href="../heath">Heath</a></li>
            <li><a href="../cave">Cave</a></li>
            <li><a href="../sulphurpool">Sulphurpool</a></li>
            <li><a href="../lakeside">Lakeside</a></li>
            <li><a href="../savanna">Savanna</a></li>
            <li><a href="../seaside">Seaside</a></li>
            <li><a href="#" class="is-selected">Estuary</a></li>
            <li><a href="../dune">Dune</a></li>
            <li><a href="../output">output formats</a></li>
          </ul>
          </li>

        </ul>
      </nav>
    </header>

    <div class="row outer-wrap">
      <article id="articleDemo" class="article article--demo">

        <div id="wrap" class="inner-wrap">

          <h2>Atelier <small>colorscheme</small></h2>
          <h3 id="about-estuary">Estuary</h3>
           <p>
          Base color for Estuary is yellow-green, no real blue, red or purple in here, (<i>red goes to the orange</i>), only the yellow/greenish colors are saturated. Colors are all very close in terms of (mid-range) tonal-contrast (‘“grey value”). A bit of a poisonous colorscheme, be aware of the crocodiles &hellip;, they’re hiding in there.
          </p>

          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 1200">
            <style type="text/css">
<![CDATA[
.base00-background  { fill: hsl(55, 12%, 12%); }
.base01-background  { fill: hsl(55, 11%, 17%); }
.base02-background  { fill: hsl(55, 10%, 34%); }
.base03-background  { fill: hsl(55, 9%, 39%);  }
.base04-background  { fill: hsl(55, 8%, 49%);  }
.base05-background  { fill: hsl(55, 7%, 54%);  }
.base06-background  { fill: hsl(55, 15%, 89%); }
.base07-background  { fill: hsl(55, 25%, 94%); }
.base08-background, .red-background     { fill: hsl(20, 55%, 47%); }
.base09-background, .orange-background  { fill: hsl(37, 80%, 38%); }
.base0A-background, .yellow-background  { fill: hsl(55, 85%, 35%); }
.base0B-background, .green-background   { fill: hsl(74, 60%, 37%); }
.base0C-background, .cyan-background    { fill: hsl(107, 37%, 45%) }
.base0D-background, .blue-background    { fill: hsl(147, 50%, 42%) }
.base0E-background, .violet-background  { fill: hsl(162, 21%, 47%) }
.base0F-background, .magenta-background { fill: hsl(340, 20%, 52%) }
text{font-size:2em}]]></style>
            <g>
            <rect x="0" y="0" width="300" height="300" class="base00-background" />
            <rect x="300" y="0" width="300" height="300" class="base01-background" />
            <rect x="600" y="0" width="300" height="300" class="base02-background" />
            <rect x="900" y="0" width="300" height="300" class="base03-background" />
            <rect x="0" y="300" width="300" height="300" class="base04-background" />
            <rect x="300" y="300" width="300" height="300" class="base05-background" />
            <rect x="600" y="300" width="300" height="300" class="base06-background" />
            <rect x="900" y="300" width="300" height="300" class="base07-background" />
            <rect x="0" y="600" width="300" height="300" class="yellow-background" />
            <rect x="300" y="600" width="300" height="300" class="orange-background" />
            <rect x="600" y="600" width="300" height="300" class="red-background" />
            <rect x="900" y="600" width="300" height="300" class="magenta-background" />
            <rect x="0" y="900" width="300" height="300" class="violet-background" />
            <rect x="300" y="900" width="300" height="300" class="blue-background" />
            <rect x="600" y="900" width="300" height="300" class="cyan-background" />
            <rect x="900" y="900" width="300" height="300" class="green-background" />
            </g>
            <g>
            <text x="0" y="158" class="base07-background">
              <tspan dx="100" dy="0">base00</tspan>
              <tspan dx="190" dy="0">base01</tspan>
              <tspan dx="200" dy="0">base02</tspan>
              <tspan dx="195" dy="0">base03</tspan>
            </text>
            <text x="0" y="465" class="base00-background">
              <tspan dx="100" dy="0">base04</tspan>
              <tspan dx="190" dy="0">base05</tspan>
              <tspan dx="200" dy="0">base06</tspan>
              <tspan dx="195" dy="0">base07</tspan>
            </text>
            <text x="0" y="760" class="base00-background">
              <tspan dx="100" dy="0">yellow</tspan>
              <tspan dx="210" dy="0">orange</tspan>
              <tspan dx="220" dy="0" class="base07-background">red</tspan>
              <tspan dx="210" dy="0" class="base07-background">magenta</tspan>
            </text>
            <text x="0" y="1060" class="base00-background">
              <tspan dx="100" dy="0">violet</tspan>
              <tspan dx="230" dy="0">blue</tspan>
              <tspan dx="235" dy="0">cyan</tspan>
              <tspan dx="225" dy="0">green</tspan>
            </text>
            </g>
          </svg>

          <h3 id="color-code" class="mtm no-border">Colors in code <small>Scss variables</small></h3>
          <pre class="base00-background language-scss"><code class="language-scss sh-c-light">
$base00: <span class="sh-c-comm">hsl(55, 12%, 12%)   /* #22221b */</span>
$base01: <span class="base01-background sh-c-comm">hsl(55, 11%, 17%)   /* #302f27 */</span>
$base02: <span class="base02-background sh-c-comm sh-c-dark">hsl(55, 10%, 34%)   /* #5f5e4e */</span>
$base03: <span class="base03-background sh-c-comm sh-c-dark">hsl(55, 9%, 39%)    /* #6c6b5a */</span>
$base04: <span class="base04-background sh-c-comm sh-c-dark">hsl(55, 8%, 49%)    /* #878573 */</span>
$base05: <span class="base05-background sh-c-comm sh-c-dark">hsl(55, 7%, 54%)    /* #929181 */</span>
$base06: <span class="base06-background sh-c-comm sh-c-dark">hsl(55, 15%, 89%)   /* #e7e6df */</span>
$base07: <span class="base07-background sh-c-comm sh-c-dark">hsl(55, 25%, 94%)   /* #f4f3ec */</span>
$base08: <span class="base08-background sh-c-comm sh-c-dark">hsl(20, 55%, 47%)   /* #ba6236 */</span>
$base09: <span class="base09-background sh-c-comm sh-c-dark">hsl(37, 80%, 38%)   /* #ae7313 */</span>
$base0a: <span class="base0A-background sh-c-comm sh-c-dark">hsl(55, 85%, 35%)   /* #a5980d */</span>
$base0b: <span class="base0B-background sh-c-comm sh-c-dark">hsl(74, 60%, 37%)   /* #7d9726 */</span>
$base0c: <span class="base0C-background sh-c-comm sh-c-dark">hsl(107, 37%, 45%   /* #5b9d48 */</span>
$base0d: <span class="base0D-background sh-c-comm sh-c-dark">hsl(147, 50%, 42%   /* #36a166 */</span>
$base0e: <span class="base0E-background sh-c-comm sh-c-dark">hsl(162, 21%, 47%   /* #5f9182 */</span>
$base0f: <span class="base0F-background sh-c-comm sh-c-dark">hsl(340, 20%, 52%   /* #9d6c7c */</span>

<span class="red-background sh-c-comm sh-c-dark">$red:</span>     $base08;
<span class="orange-background sh-c-comm sh-c-dark">$orange:</span>  $base09;
<span class="yellow-background sh-c-comm sh-c-dark">$yellow:</span>  $base0a;
<span class="green-background sh-c-comm sh-c-dark">$green:</span>   $base0b;
<span class="cyan-background sh-c-comm sh-c-dark">$cyan:</span>    $base0c;
<span class="blue-background sh-c-comm sh-c-dark">$blue:</span>    $base0d;
<span class="violet-background sh-c-comm sh-c-dark">$violet:</span>  $base0e;
<span class="magenta-background sh-c-comm sh-c-dark">$magenta:</span> $base0f;
          </code></pre>

          <pre class="base00-background base05">
<span class="base0E">require</span> <span class="base0B">"gem"</span>

<span class="base08">string</span> = <span class="base0B">"base16"</span>
<span class="base08">symbol</span> = <span class="base0B">:base16</span>
<span class="base08">fixnum</span> = <span class="base09">0</span>
<span class="base08">float</span>  = <span class="base09">0.00</span>
<span class="base08">array</span>  = <span class="base0A">Array</span>.<span class="base0D">new</span>
<span class="base08">array</span>  = [<span class="base0B">'chris'</span>, <span class="base09">85</span>]
<span class="base08">hash</span>   = {<span class="base0B">"test"</span> => <span class="base0B">"test"</span>}
<span class="base08">regexp</span> = <span class="base0C">/[abc]/</span>

<span class="base03"># This is a comment</span>
<span class="base0E">class</span> <span class="base0A">Person</span>

  <span class="base0D">attr_accessor</span> <span class="base0B">:name</span>

  <span class="base0E">def</span> <span class="base0D">initialize</span>(<span class="base08">attributes</span> = {})
    <span class="base08">@name</span> = <span class="base08">attributes</span>[<span class="base0B">:name</span>]
  <span class="base0E">end</span>

  <span class="base0E">def</span> <span class="base0E">self</span>.<span class="base0D">greet</span>
    <span class="base02-background"><span class="base0B">"hello"</span></span>
  <span class="base0E">end</span>
<span class="base0E">end</span>

<span class="base08">person1</span> = <span class="base0A">Person</span>.<span class="base0D">new</span>(<span class="base0B">:name</span> => <span class="base0B">"Chris"</span>)
<span class="base0D">print</span> <span class="base0A">Person</span>::<span class="base0D">greet</span>, <span class="base0B">" "</span>, <span class="base08">person1</span>.<span class="base0D">name</span>, <span class="base0B">"<span class="base09">\n</span>"</span>
<span class="base0D">puts</span> <span class="base0B">"another </span><span class="base0F">#{</span><span class="base0A">Person</span>::<span class="base0D">greet</span><span class="base0F">}</span> <span class="base0F">#{</span><span class="base08">person1</span>.<span class="base0D">name</span><span class="base0F">}</span><span class="base0B">"</span>
          </pre>

          <pre class="base07-background base02">
<span class="base0E">require</span> <span class="base0B">"rubygems"</span>

<span class="base08">string</span> = <span class="base0B">"tomorrow"</span>
<span class="base08">symbol</span> = <span class="base0B">:tomorrow</span>
<span class="base08">fixnum</span> = <span class="base09">0</span>
<span class="base08">float</span>  = <span class="base09">0.00</span>
<span class="base08">array</span>  = <span class="base0A">Array</span>.<span class="base0D">new</span>
<span class="base08">array</span>  = [<span class="base0B">'chris'</span>, <span class="base09">85</span>]
<span class="base08">hash</span>   = {<span class="base0B">"test"</span> => <span class="base0B">"test"</span>}
<span class="base08">regexp</span> = <span class="base0C">/[abc]/</span>

<span class="base03"># This is a comment</span>
<span class="base0E">class</span> <span class="base0A">Person</span>

  <span class="base0D">attr_accessor</span> <span class="base0B">:name</span>

  <span class="base0E">def</span> <span class="base0D">initialize</span>(<span class="base08">attributes</span> = {})
    <span class="base08">@name</span> = <span class="base08">attributes</span>[<span class="base0B">:name</span>]
  <span class="base0E">end</span>

  <span class="base0E">def</span> <span class="base0E">self</span>.<span class="base0D">greet</span>
    <span class="base06-background"><span class="base0B">"hello"</span></span>
  <span class="base0E">end</span>
<span class="base0E">end</span>

<span class="base08">person1</span> = <span class="base0A">Person</span>.<span class="base0D">new</span>(<span class="base0B">:name</span> => <span class="base0B">"Chris"</span>)
<span class="base0D">print</span> <span class="base0A">Person</span>::<span class="base0D">greet</span>, <span class="base0B">" "</span>, <span class="base08">person1</span>.<span class="base0D">name</span>, <span class="base0B">"<span class="base09">\n</span>"</span>
<span class="base0D">puts</span> <span class="base0B">"another </span><span class="base0F">#{</span><span class="base0A">Person</span>::<span class="base0D">greet</span><span class="base0F">}</span> <span class="base0F">#{</span><span class="base08">person1</span>.<span class="base0D">name</span><span class="base0F">}</span><span class="base0B">"</span>
          </pre>
          <h3 id="downloads" class="mtm">Downloads</h3>
          <p>All downloads can be found in the <a href="https://github.com/atelierbram/syntax-highlighting/tree/master/atelier-schemes/output">output</a> folder.</p>
          <p class="note">
          Note: For Sublime Text, go to <a href="https://github.com/atelierbram/syntax-highlighting/tree/master/atelier-schemes/output/textmate">Textmate folder</a>, or <a href="https://atelierbram.github.io/syntax-highlighting/atelier-schemes/output/textmate/textmate.zip">download the zip-file directly</a>.</p><p>For <a href="https://github.com/tpope/vim-pathogen">Vim with Pathogen</a> you can clone <a href="https://github.com/atelierbram/vim-colors_atelier-schemes">the dedicated repo for this purpose</a> in the <code>~/.vim/bundle</code> directory like so:</p>          <pre class="language-bash" style="background:#ebf8ff;color:#516d7b;padding:1em;border:1px solid #d6eefb"><code class="language-bash" style="background:#ebf8ff;color:#516d7b">
cd <span style="color:#935c25">~</span><span style="color:#935c25">/</span><span class="token punctuation">.</span>vim<span style="color:#935c25">/</span>bundle
git clone https<span class="token punctuation">:</span><span style="color:#935c25">/</span><span class="token operator" style="color:#935c25">/</span>github<span class="token punctuation">.</span>com<span style="color:#935c25">/</span>atelierbram<span style="color:#935c25">/</span>vim<span style="color:#935c25">-</span>colors_atelier<span style="color:#935c25">-</span>schemes<span class="token punctuation">.</span>git
          </code></pre> 

          <h3 id="credits" class="mtm">Credits</h3>
          <ul class="inline-block-list">
            <li>Credits to <a href="http://ethanschoonover.com/solarized">Ethan Schoonover</a>  whose <a href="http://github.com/altercation/solarized">Solarized colorscheme</a> was a model for these colorschemes</li>
            <li>And credits to <a href="http://chriskempson.com/">Chris Kempson</a>, whose <a href="https://github.com/chriskempson/base16-builder">Base16 Builder</a>  was used for conversion to the different output formats.</li>
          </ul>

          <p><a href="#header" class="go-to-top sh-button"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
              <g id="outline-black">
              <path opacity="0.5" d="M25,3L3,34l12-1v13h20V33l12,1L25,3z"/>
              </g>
              <g id="inner-white">
              <polygon fill="#FFFFFF" points="42,31 25,7 8,31 18,30 18,44 32,44 32,30 	"/>
              </g>
            </svg><span class="up-arrow">&#11014;</span>
            <span class="visuallyhidden">Go to Top</span></a></p>
        </div>
      </article>

    <footer class="page-footer">
      <div class="large-12 columns">
        <div class="row">
          <div class="large-8 columns">
            <p id="license" class="copyright">&copy; 2013 <a href="http://atelierbramdehaan.nl" class="underline">Atelier Bram de Haan</a>, Releases under <a href="http://atelierbram.mit-license.org" class="underline">MIT License</a></p>
          </div>
          <div class="large-4 columns">
            <a href="https://github.com/atelierbram/syntax-highlighting" class="sh-button">This repo on Github</a>


          </div>
        </div>
      </div>
    </footer>
      </div>
    <script>
document.write('<script src=' +
    ('__proto__' in {} ? '../../assets/js/vendor/zepto.min' : '../../assets/js/vendor/jquery') +
    '.js><\/script>')
    </script>
    <script src="../../assets/js/foundation/foundation.min.js"></script>
    <script src="../../assets/js/foundation/foundation.dropdown.min.js"></script>
    <script>
$(document).foundation();
    </script>
    <script src="../../assets/js/vendor/custom.modernizr.js"></script>
    <script>function insertTopborder() { $('<div class="rainbow-border"><span class="yellow-background"></span><span class="orange-background"></span><span class="red-background"></span><span class="magenta-background"></span><span class="violet-background"></span><span class="blue-background"></span><span class="cyan-background"></span><span class="green-background"></span></div>').insertBefore('#wrap'); } insertTopborder();</script>
    </body>
    </html>
